<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
</head>

<body style="background-color: var(--sapBackgroundColor)">

<style>
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
</style>

    <!-- playground-fold-end -->


        <ui5-panel>

            <div slot="header" class="header">
                <ui5-title level="H4">Countries</ui5-title>
                <div>
                    <ui5-button design="Emphasized">Add</ui5-button>
                    <ui5-button design="Negative">Remove</ui5-button>
                    <ui5-button>Edit</ui5-button>
                </div>
            </div>

            <ui5-title level="H5">Heading!</ui5-title>
            <ui5-label>
                Aute ullamco officia fugiat culpa do tempor tempor aute excepteur magna.
                Quis velit adipisicing excepteur do eu duis elit. Sunt ea pariatur nulla est laborum proident sunt labore
                commodo Lorem laboris nisi Lorem.
                Aute ullamco officia fugiat culpa do tempor tempor aute excepteur magna.
                Quis velit adipisicing excepteur do eu duis elit. Sunt ea pariatur nulla est laborum proident sunt labore
                commodo Lorem laboris nisi Lorem.
            </ui5-label>
        </ui5-panel>

    <!-- playground-fold -->
    <script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->
